<template>
  <div style="background:#fff;height:100%;overflow: hidden;border-radius: 10px">
  <a-tabs v-model:activeKey="activeTitleKey" style="margin-left: 13px">
    <a-tab-pane key="materialList" tab="素材库"></a-tab-pane>
    <a-tab-pane key="shopList" tab="项目库"></a-tab-pane>
  </a-tabs>
  <div class="box" v-if="activeTitleKey === 'materialList'">
    <!-- 头部 -->
    <div class="title_box">
      <div class="memory">
        <a-row justify="space-between" align="middle">
          <a-col style="cursor: pointer; margin-right: 30px">
            <a-tooltip>
              <template #title>免费空间： {{ capacityToTalFormat }} </template>
              {{ capacityFormat }} / {{ capacityToTalFormat }}
              <span :style="percent >= 100 ? 'color: red' : 'color: #666'">
                (已使用: {{ (percent < 1 ? 1 : percent) + "%" }})
              </span>
            </a-tooltip>
          </a-col>
          <a-space>
            <a-col style="cursor: pointer;color: red;" @click="clearClick"
              ><delete-outlined class="qingli" />清理</a-col
            >
            <a-col style="color:#918c8c">|</a-col>
            <a-col style="cursor: pointer;color: #2878ff;" @click="addMater"
              ><inbox-outlined class="qingli" />扩容
            </a-col>
            <a-col style="color:#918c8c">|</a-col>
            <a-col style="cursor: pointer" @click="goDowloadCenter"
              ><arrow-down-outlined class="qingli" />下载中心
            </a-col>
          </a-space>
        </a-row>
      </div>
    </div>

    <!-- 内容 -->
    <div class="content">
      <a-row class="content-box">
        <a-col class="left-content">
          <a-tabs
            v-model:activeKey="activeKey"
            tab-position="left"
            animated
            @change="activeKeyChange"
          >
            <a-tab-pane key="1">
              <template #tab>
                <div class="left-content-box">
                  <cu-icon
                    type="icon-juzhenyingxiao1"
                    class="left-content-box-icon"
                  ></cu-icon>
                  <span class="left-content-box-title"> 项目素材 </span>
                </div>
              </template>
              <template #expandIcon="{ isActive }">
                <caret-right-outlined
                  :class="
                    activeKey || !isActiveKey ? 'general-materials-bg' : ''
                  "
                  :rotate="isActive ? 90 : 0"
                />
              </template>
              <template #header>
                <div
                  style="width: 100%; height: 100%"
                  :class="
                    activeKey || !isActiveKey ? 'general-materials-bg' : ''
                  "
                >
                  项目素材
                </div>
              </template>
            </a-tab-pane>

            <a-tab-pane key="2">
              <template #tab>
                <div class="left-content-box">
                  <cu-icon
                    type="icon-juzhenyingxiao1"
                    class="left-content-box-icon"
                  ></cu-icon>
                  <span class="left-content-box-title"> 通用素材 </span>
                </div>
              </template>
            </a-tab-pane>
          </a-tabs>

          <div style="width: 247px" v-if="activeKey !== '2'">
            <div>
              <a-input-search
                v-model:value="seatchValue"
                placeholder="请输入关键字搜索"
                @search="searchChane"
              />
            </div>
            <div style="margin: 10px 0">
              <a-button @click="addBusiness"
                ><plus-outlined />新建项目</a-button
              >
            </div>

            <a-spin :spinning="treeSpinLoading">
              <a-tree
                class="draggable-tree"
                v-model:selectedKeys="selectedKeys"
                v-model:expandedKeys="expandedKeys"
                block-node
                :height="treeHeight"
                :tree-data="treeData"
                expandAction="click"
                :fieldNames="fieldNames"
                @select="selectChange"
              >
                <template #title="props">
                  <a-row justify="space-between">
                    <a-col flex="1">
                      {{ props.name }}
                    </a-col>
                    <a-col>
                      <a-tag color="orange" v-if="props.isTopping">置顶</a-tag>
                      <a-popover placement="bottom">
                        <template #content>
                          <a-row>
                            <a-button
                              type="text"
                              @click="treeBtnClick('edit', props)"
                              v-if="props.isLeaf"
                            >
                              编辑
                            </a-button>
                          </a-row>
                          <a-row>
                            <a-button
                              type="text"
                              @click="treeBtnClick('add', props)"
                              v-if="!props.isLeaf"
                              >新增
                            </a-button>
                          </a-row>
                          <a-row>
                            <a-button
                              type="text"
                              @click="treeBtnClick('topping', props)"
                              v-if="!props.isLeaf"
                            >
                              {{ props.isTopping ? "取消置顶" : "置顶" }}
                            </a-button>
                          </a-row>
                          <a-row>
                            <a-button
                              type="text"
                              danger
                              @click="treeBtnClick('delete', props)"
                            >
                              删除
                            </a-button>
                          </a-row>
                        </template>
                        <setting-outlined v-if="props.isSetting" />
                      </a-popover>
                    </a-col>
                  </a-row>
                </template>
              </a-tree>
            </a-spin>

            <a-empty
              v-if="!treeData.length && activeKey"
              :image="simpleImage"
            />
          </div>
        </a-col>

        <a-col class="right-content" flex="1">
          <template v-if="!showProjectTagList">
            <div style="margin-bottom: 10px">
              <a-row class="file-batch-operate-box" v-if="checkedNum">
                <a-col class="item" @click="deleteFileCheckd">
                  <delete-outlined class="icon" />删除
                </a-col>
                <a-col
                  class="item"
                  @click="uploadFileCheckd"
                  v-if="
                    (fileTxtChange !== 'text' &&
                      $route.name != 'ComposeMaterial') ||
                    ($route.name == 'ComposeMaterial' &&
                      fileTxtChange !== 'image')
                  "
                >
                  <download-outlined class="icon" />下载
                </a-col>
                <a-col
                  v-if="clipRole.includes('sphj') && !fileTxtChange"
                  class="item"
                  @click="mportScissors"
                >
                  <appstore-add-outlined class="icon" />导入至混剪
                </a-col>

                <a-col
                  class="item"
                  @click="moveClick(1)"
                  v-if="
                    (fileTxtChange && $route.name != 'ComposeMaterial') ||
                    ($route.name == 'ComposeMaterial' &&
                      fileTxtChange !== 'image' &&
                      fileTxtChange !== 'video')
                  "
                >
                  <drag-outlined class="icon" />移动
                </a-col>

                <a-col
                  class="item"
                  @click="moveClick(2)"
                  v-if="
                    (fileTxtChange &&
                      fileTxtChange != 'text' &&
                      $route.name != 'ComposeMaterial') ||
                    ($route.name == 'ComposeMaterial' &&
                      fileTxtChange !== 'image' &&
                      fileTxtChange !== 'video')
                  "
                >
                  <plus-outlined class="icon" />复制
                </a-col>

                <a-col
                  class="item"
                  @click="addTags"
                  v-if="
                    (fileTxtChange &&
                      fileTxtChange != 'text' &&
                      $route.name != 'ComposeMaterial') ||
                    ($route.name == 'ComposeMaterial' &&
                      fileTxtChange !== 'image' &&
                      fileTxtChange !== 'video')
                  "
                >
                  <plus-outlined class="icon" />批量加标签
                </a-col>
                <a-col
                  class="item"
                  @click="go_DY"
                  v-if="
                    (fileTxtChange &&
                      fileTxtChange != 'text' &&
                      $route.name != 'MaterialList') ||
                    ($route.name == 'ComposeMaterial' &&
                      fileTxtChange !== 'image' &&
                      fileTxtChange !== 'video')
                  "
                >
                  <cu-icon type="icon-fabu" class="icon"></cu-icon>发布至抖音
                </a-col>
              </a-row>

              <a-dropdown>
                <template #overlay>
                  <a-menu>
                    <a-menu-item key="1" @click="Localupload">
                      本地上传
                    </a-menu-item>
                    <a-menu-item key="2" @click="openMobile">
                      手机上传
                    </a-menu-item>
                  </a-menu>
                </template>

                <a-button v-if="fileTxtChange" type="primary" class="addFile"
                  ><folder-add-outlined class="addFile_icon" />
                  上传文件
                </a-button>
              </a-dropdown>

              <a-dropdown>
                <template #overlay>
                  <a-menu>
                    <a-menu-item key="1" @click="addFolder">
                      新建文件夹
                    </a-menu-item>
                    <a-menu-item key="3" @click="uploadFoladers('directory')">
                      文件夹上传
                    </a-menu-item>
                  </a-menu>
                </template>

                <a-button
                  v-if="!fileData.id || !fileTxtChange"
                  type="primary"
                  class="addFile"
                  ><folder-add-outlined class="addFile_icon" />
                  新建文件夹
                </a-button>
              </a-dropdown>

              <a-button style="margin-right: 10px" @click="goTagManage"
                ><tag-outlined /> 标签管理</a-button
              >
              <a-button @click="showProjectTagList = true"
                ><tags-outlined />项目标签列表</a-button
              >
            </div>

            <div class="path_con">
              <span @click="backFille" v-if="tagObj?.typeName">{{
                tagObj?.typeName
              }}</span>
              <span v-if="tagObj?.projectName"
                >&nbsp;/&nbsp;{{ tagObj?.projectName }}</span
              >
              <span @click="backFille" v-if="tagObj?.libraryName"
                >&nbsp;/&nbsp;{{ tagObj?.libraryName }}</span
              >
              <span v-if="tagObj?.folderName" class="path_con_folderName"
                >&nbsp;/&nbsp;{{ tagObj?.folderName }}</span
              >
            </div>

            <div style="margin: 5px 0">
              <a-button
                v-if="fileTxtChange"
                type="primary"
                class="goBack"
                size="small"
                @click="backFille"
                >返回上一级</a-button
              >
            </div>
            <a-space>
              <a-checkbox
                v-model:checked="checkAll"
                :indeterminate="indeterminate"
                @change="onCheckAllChange"
                style="color: #9ea4aa"
                v-if="isCanDelete && fileData.is_can_delete !== 1"
              >
                全选
              </a-checkbox>
              <div style="color: #9ea4aa" v-if="checkedNum">
                已选中{{ checkedNum }}个文件夹
              </div>
              <div style="color: #9ea4aa">
                共{{ folderList.length || subFileList.length }}个文件夹
              </div>
            </a-space>
            <div class="content hide-scroller-bar">
              <a-spin :spinning="fileSpinning">
                <SubFileList
                  v-if="fileTxtChange"
                  :merchant_library_id="selectedKeys[0]"
                  :type="fileTxtChange"
                  :list="subFileList"
                  :folderName="tagObj.folderName"
                  @checkedChange="checkedChange"
                  @changeSuccess="subFileSuccess"
                  @refrash="getMediaList"
                >
                </SubFileList>
                <FileList
                  v-else
                  :list="folderList"
                  @downloadFille="downloadFille"
                  @fileDetail="fileDetail"
                  @checkedChange="checkedChange"
                  @changeSuccess="changeSuccess"
                ></FileList>
              </a-spin>

              <a-pagination
                style="position: fixed;bottom:20px;right:0; float: right; margin-right: 40px"
                @change="handlePageChange"
                v-model:current="pageInfo.current"
                v-model:pageSize="pageInfo.pageSize"
                :total="pageInfo.total"
                :show-total="(total) => `共${total}个`"
                show-size-changer
                :page-size-options="['10', '18', '30', '40', '50', '100']"
              />
            </div>
          </template>

          <!-- 项目标签列表 -->
          <div
            class="scroll_con"
            style="overflow-y: scroll; height: 800px"
            v-if="showProjectTagList"
          >
            <ProjectTagList
              :merchant_library_id="groupItem.merchant_library_id"
              :group_id="groupItem.id"
              :multimedia_id="multimedia_id"
              :projectName="tagObj?.projectName + '-' + groupItem?.group_name"
              @back="showProjectTagList = false"
            />
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
  <ShopList v-else />

  <!-- 清理内存 -->
  <CleaningModal
    :visible="visibleCleaning"
    @onCancel="visibleCleaning = false"
    @onSubmit="onSubmitClean"
  />

  <!-- 新建项目 -->
  <NewMerchant
    :visible="visibleMerchant"
    ref="merchantRef"
    title="新建项目素材库目录"
    @onCancel="onCancelMerchant"
    @onSubmit="onSubmitMerchant"
    :id="merchantId"
  />

  <!-- 上传文件 新 -->
  <NewUploadFileModal
    :visible="NewUploadvisable"
    :type="fileTxtChange"
    :fileData="fileData"
    @cancel="cancelNewUpload"
    @onSubmit="onSubmitUploadFile"
    @topUp="topUp"
  />

  <!-- 导出弹框 -->
  <ExportMdal :visible="visibleExport" @cacel="visibleExport = false" />

  <!-- 上传文件 -->
  <UploadFileModal
    :AllData="AllData"
    :directory="directory"
    :visible="visibleUploadFile"
    :type="fileTxtChange"
    :fileData="fileData"
    @onCancel="visibleUploadFile = false"
    @onSubmit="onSubmitUploadFile"
    @onSubmit_All="onSubmit_All"
    :activeKey="activeKey"
  />
  <!-- 充值弹窗 -->
  <vipModal ref="vipModalRef" :visible="vipVisible" @close="vipVisible = false"></vipModal>

  <!-- 新建文件夹 -->
  <NewFolder
    :visible="visibleNewFolder"
    :checkedSelectType="'ALL_type'"
    :groupData="groupItem"
    @onCancel="visibleNewFolder = false"
    @onSubmit="onSubmitFolder"
    :current_name="current_name"
  />

  <tagsModal
    :ischooses="ischooses"
    :merchant_folder_statck_id="merchant_folder_statck_id_new"
    :fileIds="fileIds"
    :visible="tagVisible"
    :labelInfo="labelInfo"
    @close="closeTags"
  />

  <!-- 移动弹框 -->
  <MoveModal
    :moveType="moveType"
    :visible="visibleMove"
    :fileData="fileData"
    :list="moveList"
    @onCancel="visibleMove = false"
    @onSubmit="onMoveSubmit"
  />

  <!-- 添加目类 -->
  <AddContents
    :visible="visibleContents"
    @onCancel="visibleContents = false"
    @onSubmit="onSubmitContents"
    :id="merchantId"
    :editData="groupEditData"
  />

  <!-- 手机上传 -->
  <a-modal
    :visible="ModelUpState"
    @cancel="handleClose"
    :footer="null"
    :width="300"
  >
    <template #title>
      <div>
        <span>手机上传</span>
      </div>
    </template>
    <div class="mobile">
      <div class="mobile-img">
        <img :src="MobileimgUrl" alt="" />
      </div>

      <div class="mobile-title">使用微信扫一扫</div>
    </div>
  </a-modal>

  <kuarong
    :capacityToTalFormat="capacityToTalFormat" 
    ref="kuarongRef"
    @openVipModel="openVipModel"
  ></kuarong>
 </div>
</template>

<script setup>
import { ref, computed, nextTick, onMounted, createVNode } from "vue";
import {
  CaretRightOutlined,
  AppstoreOutlined,
  DeleteOutlined,
  InboxOutlined,
  PlusOutlined,
  SettingOutlined,
  ExclamationCircleOutlined,
  FolderAddOutlined,
  DownloadOutlined,
  DragOutlined,
  TagOutlined,
  TagsOutlined,
  AppstoreAddOutlined,
  ArrowDownOutlined,
} from "@ant-design/icons-vue";
import { useRoute, useRouter, onBeforeRouteLeave } from "vue-router";
import request from "../../../common/utils/request";
import store from "@/store/index.js";
import SubFileList from "./SubFileList.vue";
import FileList from "./FileList.vue";
import { message, Modal, Empty, notification } from "ant-design-vue";
import MoveModal from "./modules/MoveModal.vue";
import kuarong from "@/views/shotstack/MaterialCenter/modules/kuarong.vue";

import CleaningModal from "./modules/CleaningModal.vue";
import NewMerchant from "./modules/NewMerchant.vue";
import NewUploadFileModal from "./modules/NewUploadFileModal.vue";
import ProjectTagList from "../tagManage/components/ProjectTagList/index.vue";
import ExportMdal from "../components/ExportMdal/index.vue";
import UploadFileModal from "./modules/UploadFileModal.vue";
import NewFolder from "./modules/NewFolder.vue";
import tagsModal from "./modules/tagsModal.vue";
import AddContents from "./modules/AddContents.vue";
import utils from "../../../common/utils/utils";
import ShopList from "./ShopList.vue";
// 充值弹窗
import vipModal from '@/socialMedia/Vip/vipModal.vue'
const vipVisible = ref(false)
const vipModalRef = ref(null)

const route = useRoute();
const router = useRouter();
const clipRole = computed(() => store.state.user?.clipRole || []);
const activeTitleKey = ref("materialList");
const kuarongRef = ref(null);
// 批量发布至抖音
const go_DY = () => {
  if (store.getters.isVersionExpired) {
    notification.warn({ message: "您的套餐已到期", duration: 2 });
    vipVisible.value = true
  } else {
    let ids = [];
    subFileList.value.forEach((item) => {
      if (item.checkedValue) {
        ids.push(item.id);
      }
    });

    router.push({
      name: "AutoRelease",
      query: {
        choose: "2",
        merchant_library_id: selectedKeys.value[0],
        ids,
        material_type: subFileList.value[0].material_type,
      },
    });
  }
};

const merchant_folder_statck_id_new = ref("");
const tagVisible = ref(false);
const ischooses = ref(false);
const fileIds = ref([]);
const labelInfo = ref({});

// 多选打标签
const addTags = () => {
  if (store.getters.isVersionExpired) {
    notification.warn({ message: "您的套餐已到期", duration: 2 });
    vipVisible.value = true

  } else {
    subFileList.value.forEach((item) => {
      if (item.checkedValue) {
        fileIds.value.push(item.id);
      }
    });
    merchant_folder_statck_id_new.value = fileData.value.id;
    // 这里要拿到 多选项的id
    tagVisible.value = true;
    ischooses.value = true;
  }
};

// 关闭标签弹框
const closeTags = (flag) => {
  tagVisible.value = false;
  indeterminate.value = false;
  checkAll.value = false;
  getMediaList();
};

const moveType = ref(1);
const moveList = ref([]);
const visibleMove = ref(false);
const moveClick = (type) => {
  if (store.getters.isVersionExpired) {
    notification.warn({ message: "您的套餐已到期", duration: 2 });
    vipVisible.value = true

  } else {
    moveList.value = [];
    subFileList.value.forEach((item) => {
      if (item.checkedValue) {
        moveList.value.push(item.id);
      }
    });
    fileData.value.folder_use_type = 1;
    moveType.value = type;
    visibleMove.value = true;
  }
};

// 移动成功的回调
const onMoveSubmit = () => {
  visibleMove.value = false;
  checkAll.value = false;
  indeterminate.value = false;
  pageInfo.current.value = 1;
  if (fileTxtChange.value == "text") {
    checkedNum.value = 0;
    getTextList();
  } else {
    getMediaList();
  }
};

// 导入至混剪
const mportScissors = () => {
  if (store.getters.isVersionExpired) {
    notification.warn({ message: "您的套餐已到期", duration: 2 });
    vipVisible.value = true

  } else {
    let selectedFolderIds = [];

    // 过滤出类型为图片或视频的文件夹，并只保留选中的
    folderList.value
      .filter(
        (item) => item.folder_type === "image" || item.folder_type === "video"
      )
      .forEach((item) => {
        if (item.checkedValue) {
          selectedFolderIds.push(item.id);
        }
      });

    // 根据选中的文件夹数量决定行为
    if (selectedFolderIds.length === 1) {
      // 如果只有一个文件夹被选中，则导航到指定路径
      router.push({
        path: `/mixedCutCreat`,
        query: {
          type: 0,
          viewType: "2",
          materid: selectedFolderIds[0],
        },
      });
    } else {
      // 如果没有或超过一个文件夹被选中，则显示错误消息
      message.error(
        selectedFolderIds.length === 0
          ? "请选择正确的文件夹"
          : "最多选择一个文件夹"
      );
    }
  }
};

// 删除相关 逻辑
const deleteFileCheckd = () => {
  if (store.getters.isVersionExpired) {
    notification.warn({ message: "您的套餐已到期", duration: 2 });
    vipVisible.value = true

  } else {
    Modal.confirm({
      title: `提示`,
      icon: createVNode(ExclamationCircleOutlined),
      content: fileTxtChange.value
        ? "确定删除这些素材吗？"
        : "确定删除这些文件夹吗？",
      cancelText: "取消",
      okText: "确定",
      onOk() {
        if (fileTxtChange.value == "text") {
          let params = {
            mediaIds: [],
          };
          subFileList.value.forEach((item) => {
            if (item.checkedValue) {
              params.mediaIds.push(item.id);
            }
          });
          request
            .del("/work_ai", "/user/shotstack/text", params)
            .then((res) => {
              message.success("删除成功!");
              checkedNum.value = 0;
              checkAll.value = false;
              indeterminate.value = false;
              getTextList();
            });
          return;
        }
        if (fileTxtChange.value) {
          let params = {
            mediaIds: [],
          };
          subFileList.value.forEach((item) => {
            if (item.checkedValue) {
              params.mediaIds.push(item.id);
            }
          });
          request
            .del("/work_ai", "/user/shotstack/media", params)
            .then((res) => {
              message.success("删除成功!");
              checkedNum.value = 0;
              checkAll.value = false;
              indeterminate.value = false;
              getMediaList();
            });
          return;
        }

        let params = {
          merchant_library_id:
            groupItem.value.merchant_library_id || groupItem.value.id,
          textFolderIds: [],
          mediaFolderIds: [],
        };
        folderList.value.forEach((item) => {
          if (item.checkedValue) {
            if (item.folder_type == "text") {
              params.textFolderIds.push(item.id);
            } else {
              params.mediaFolderIds.push(item.id);
            }
          }
        });
        request
          .del("/work_ai", "/user/shotstack/folder", params)
          .then((res) => {
            message.success("删除成功!");
            getFolderList();
            checkedNum.value = 0;
            checkAll.value = false;
            indeterminate.value = false;
            // 删除文件夹后, 清空素材文件夹的id的回显id
            store.commit("videoMixCut/SET_FOLDER_IDS", {
              merchant_library_id: null,
              merchant_folder_statck_id: null,
              group_id: null,
            });
          });
      },
    });
  }
};

// 下载相关逻辑
const uploadFileCheckd = () => {
  if (store.getters.isVersionExpired) {
    notification.warn({ message: "您的套餐已到期", duration: 2 });
    vipVisible.value = true

  } else {
    let ids = [];
    let isFolderTypeText = false;
    if (subFileList.value.length) {
      subFileList.value.forEach((item) => {
        if (item.checkedValue) {
          ids.push(item.id);
        }
      });
    }
    if (folderList.value.length) {
      folderList.value.forEach((item) => {
        if (item.checkedValue) {
          if (item.folder_type == "text") {
            isFolderTypeText = true;
          }
          ids.push(item.id);
        }
      });
    }
    if (isFolderTypeText) {
      message.warn("文案类型文件不支持下载");
      return;
    }
    if (ids.length) {
      if (fileTxtChange.value) {
        request
          .put("/work_ai", "/user/shotstack/media/download", {
            ids,
          })
          .then((res) => {
            visibleExport.value = true;
          });
      } else {
        request
          .put("/work_ai", "/user/shotstack/folder/download", {
            ids,
          })
          .then((res) => {
            visibleExport.value = true;
          });
      }
    }
  }
};

const visibleNewFolder = ref(false);
const visibleUploadFile = ref(false);
const current_name = ref("");

// 新建文件夹
const addFolder = () => {
  let obj1 = {};
  let obj2 = {};
  if (store.getters.isVersionExpired) {
    notification.warn({ message: "您的套餐已到期", duration: 2 });
    vipVisible.value = true

  } else {
    directory.value = false;
    if (activeKey.value == "1") {
      obj1 = treeData.value.flatMap((library) => {
        const foundItemInGroup = library.folder_group.find(
          (item) => item.id === selectedKeys.value[0]
        );
        return foundItemInGroup ? [foundItemInGroup] : [];
      })[0];

      obj2 = treeData.value.find((library) => {
        const foundItemInGroup = library.folder_group.find(
          (item) => item.id === selectedKeys.value[0]
        );
        return foundItemInGroup ? library : "";
      });

      current_name.value = `${obj2.name}/${obj1.group_name}`;
    } else {
      current_name.value = "null";
    }

    if (fileTxtChange.value) {
      visibleUploadFile.value = true;
    } else {
      visibleNewFolder.value = true;
    }
  }
};

// 新建文件夹 成功的回调
const onSubmitFolder = () => {
  visibleNewFolder.value = false;
  getFolderList();
};

const directory = ref(false);
const AllData = ref({
  merchant_library_id: "",
  group_id: "",
});
const uploadFoladers = (type) => {
  if (store.getters.isVersionExpired) {
    notification.warn({ message: "您的套餐已到期", duration: 2 });
    vipVisible.value = true

  } else {
    if (type == "directory") {
      directory.value = true;
    } else {
      directory.value = false;
    }
    treeData.value.forEach((item) => {
      if (item.folder_group && item.folder_group.length > 0) {
        item.folder_group.forEach((v2) => {
          if (v2.id === selectedKeys.value[0]) {
            AllData.value.merchant_library_id = item.id;
            AllData.value.group_id = v2.id.split("-")[0];
          }
        });
      }
    });
    visibleUploadFile.value = true;
  }
};

// 上传文件  成功的回掉
const onSubmit_All = () => {
  visibleUploadFile.value = false;
  getFolderList();
};

// 分页器 点击事件
const handlePageChange = (page, pageSize) => {
  pageInfo.value.current = page;
  pageInfo.value.pageSize = pageSize;
  checkAll.value = false;
  indeterminate.value = false;
  checkedNum.value = 0;
  isSpinning.value = true;
  if (fileTxtChange.value) {
    if (fileTxtChange.value == "text") {
      getTextList();
    } else {
      getMediaList();
    }
  } else {
    getFolderList();
  }
};

// 文件夹组件  方法回调
const fileDetail = (item) => {
  folderList.value = [];
  subFileList.value = [];
  fileTxtChange.value = item.folder_type;
  fileData.value = item;
  checkAll.value = false;
  checkedNum.value = 0;
  indeterminate.value = false;
  tagObj.value.folderName = item.folder_name;
  pageInfo.value.current = 1;
  pageInfo.value.pageSize = 18;
  if (item.folder_type == "text") {
    getTextList();
  } else {
    getMediaList();
  }
};

// 文件夹 / 文件 相关
const checkedChange = () => {
  if (fileTxtChange.value) {
    let checkedNum_min = subFileList.value?.filter(
      (item) => item.checkedValue
    ).length;
    if (checkedNum_min) {
      indeterminate.value = true;
    } else {
      indeterminate.value = false;
      checkAll.value = false;
    }
    if (checkedNum_min == subFileList.value.length) {
      indeterminate.value = false;
      checkAll.value = true;
    }
    checkedNum.value = checkedNum_min;
    return;
  }
  let checkedNum_min = folderList.value?.filter(
    (item) => item.checkedValue
  ).length;
  if (checkedNum_min) {
    indeterminate.value = true;
  } else {
    indeterminate.value = false;
    checkAll.value = false;
  }
  if (checkedNum_min == folderList.value.length) {
    indeterminate.value = false;
    checkAll.value = true;
  }
  checkedNum.value = checkedNum_min;
};

const changeSuccess = () => {
  checkAll.value = false;
  checkedNum.value = 0;
  indeterminate.value = false;
  getFolderList();
};

const isSpinning = ref(true);
const subFileSuccess = () => {
  checkAll.value = false;
  checkedNum.value = 0;
  indeterminate.value = false;
  isSpinning.value = false;
  if (fileTxtChange.value == "text") {
    getTextList();
  } else {
    getMediaList();
  }
};

const visibleExport = ref(false);
// 下载文件
const downloadFille = (data) => {
  request
    .put("/work_ai", "/user/shotstack/folder/download", {
      ids: [data.id],
    })
    .then((res) => {
      visibleExport.value = true;
    });
};

// 全选相关逻辑
const onCheckAllChange = (e) => {
  if (e.target.checked) {
    if (fileTxtChange.value) {
      subFileList.value.forEach((item) => {
        item.checkedValue = true;
      });
      indeterminate.value = false;
      checkAll.value = true;
      checkedNum.value = subFileList.value.length;
    } else {
      folderList.value.forEach((item) => {
        if (item.is_can_delete == 1) {
          item.checkedValue = false;
        } else {
          item.checkedValue = true;
        }
      });
      indeterminate.value = false;
      checkAll.value = true;
      checkedNum.value = folderList.value?.filter(
        (item, index) => item.checkedValue
      ).length;
    }
  } else {
    if (fileTxtChange.value) {
      subFileList.value.forEach((item) => {
        item.checkedValue = false;
      });
    } else {
      folderList.value.forEach((item) => {
        item.checkedValue = false;
      });
    }

    indeterminate.value = false;
    checkAll.value = false;
    checkedNum.value = 0;
  }
};

// 回退相关逻辑
const backFille = () => {
  fileTxtChange.value = "";
  checkAll.value = false;
  checkedNum.value = 0;
  indeterminate.value = false;
  fileData.value = {};
  tagObj.value.folderName = "";
  pageInfo.value.current = 1;
  pageInfo.value.pageSize = 40;
  getFolderList();
};

const multimedia_id = null;

//标签管理
const goTagManage = () => {
  if (store.getters.isVersionExpired) {
    notification.warn({ message: "您的套餐已到期", duration: 2 });
    vipVisible.value = true

  } else {
    // 去什么样 回来什么样
    router.push({
      name: "TagManage",
      query: {
        activeKey: activeKey.value,
        // selectedKeys: selectedKeys.value
      },
    });
  }
};

// 手机上传
const ModelUpState = ref(false);
const MobileimgUrl = ref(false);
const openMobile = () => {
  if (store.getters.isVersionExpired) {
    notification.warn({ message: "您的套餐已到期", duration: 2 });
    vipVisible.value = true

  } else {
    ModelUpState.value = true;
    getMobile();
  }
};

// 获取手机上传二维码
const getMobile = () => {
  // let BASE_URL = import.meta.env.VITE_SITE_URL;
  let qrcodeParams = {
    // qrCode: `${window.location.origin}/material?org_id=${utils.getOrgId()}&merchant_folder_statck_id=${fileData.value.id}`,
    // groupItem项目id, merchant_folder_statck_id素材文件夹id
    // qrCode: `${window.location.origin}/material?org_id=${utils.getOrgId()}&merchant_folder_statck_id=${fileData.value.id}&group_id=${groupItem.value.id}`,
    qrCode: `${
      import.meta.env.ELECTRON ? import.meta.env.VITE_SITE_URL : request.BASE_URL
    }/material?org_id=${utils.getOrgId()}&merchant_folder_statck_id=${
      fileData.value.id
    }&group_id=${groupItem.value.merchant_library_id}`,
  };
  request.get("/public", "/qrcode", qrcodeParams).then((res) => {
    MobileimgUrl.value = res.url;
  });
};

//关闭手机上传弹窗
const handleClose = () => {
  ModelUpState.value = false;
};

// 本地上传
const NewUploadvisable = ref(false);
const Localupload = () => {
  if (store.getters.isVersionExpired) {
    notification.warn({ message: "您的套餐已到期", duration: 2 });
    vipVisible.value = true
  } else {
    NewUploadvisable.value = true;
  }
};

// 上传文件 成功的回掉
const onSubmitUploadFile = (data) => {
  NewUploadvisable.value = false;
  pageInfo.value.current = 1;
  if (data == "text") {
    getTextList();
  } else {
    getMediaList();
  }
};

// 关闭上传文件弹窗
const cancelNewUpload = () => {
  NewUploadvisable.value = false;
};

const visibleContents = ref(false);

const onSubmitContents = () => {
  visibleContents.value = false;
  getlibraryList({init:false});
};

const treeBtnClick = (key, item) => {
  if (store.getters.isVersionExpired) {
    notification.warn({ message: "您的套餐已到期", duration: 2 });
    vipVisible.value = true

  } else {
    if (typeof item.id == "string") {
      item.id = item.id.split("-")[0];
    }
    switch (key) {
      case "add":
        groupEditData.value = {};
        merchantId.value = item.id;
        visibleContents.value = true;
        break;
      case "edit":
        if (item.isLeaf) {
          groupEditData.value = item;
          visibleContents.value = true;
          return;
        }
        merchantId.value = item.id;
        visibleMerchant.value = true;
        break;
      case "topping":
        request
          .put("/work_ai", "/user/user/shotstack/library/topping", {
            id: item.id,
            is_top: item.isTopping ? 0 : 1,
          })
          .then((res) => {
            message.success(item.isTopping ? "已取消置顶" : "已置顶");
            getlibraryList({init:true});
          });

        break;
      case "delete":
        Modal.confirm({
          title: `确定删除 ${item.name} 么？`,
          icon: createVNode(ExclamationCircleOutlined),
          cancelText: "取消",
          okText: "确定",
          onOk() {
            if (item.isLeaf) {
              request
                .del("/work_ai", "/user/shotstack/group", {
                  id: item.id,
                })
                .then((res) => {
                  groupItem.value = {};
                  message.success("删除成功");
                  getlibraryList({init:false});
                });
              return;
            }
            request
              .del("/work_ai", "/user/shotstack/library", {
                merchant_library_id: item.id,
              })
              .then((res) => {
                groupItem.value = {};
                isDelete.value = true;
                message.success("删除成功");
                getlibraryList({init:false});
                // 删除项目后, 清空素材文件夹的id的回显id
                store.commit("videoMixCut/SET_FOLDER_IDS", {
                  merchant_library_id: null,
                  merchant_folder_statck_id: null,
                  group_id: null,
                });
              });
          },
        });
        break;
    }
  }
};

//右边文件夹相关
const showProjectTagList = ref(false);
const fileData = ref({});

const treeSpinLoading = ref(false);
const expandedKeys = ref([]);
const selectedKeys = ref([]);
const groupItem = ref({});
const groupEditData = ref({});
const treeData = ref([]);
const folderList = ref([]);
const fieldNames = ref({
  children: "folder_group",
  title: "name",
  key: "id",
});
const tagObj = ref({
  typeName: "项目素材",
  projectName: "",
  libraryName: "",
  folderName: "",
  materialName: "",
});
// 查询 树形结构   ****************
const getlibraryList = (paramsData = {}) => {

  const { init = false, querySerch = false } = paramsData;
  
  let params = { name: seatchValue.value || undefined };
  treeSpinLoading.value = true;
  request
    .get("/work_ai", "/user/shotstack/library/withGroup/list", params)
    .then((res) => {

      if (res.result.length) {
        res.result.forEach((item) => {
          item.folder_group = item.folder_group.map((folder, index) => {
            const newObj = {
              ...folder,
              id: `${folder.id}-${index}`,
              name: folder.group_name,
            };

            // 根据条件添加 isSetting 属性
            if (index !== 0) {
              newObj.isSetting = true;
              newObj.isLeaf = true;
            }
            return newObj;
          });
        });

        treeData.value = res.result.map((item) => {
          return {
            ...item,
            isTopping: item.top_time,
            isSetting: true,
          };
        });

        if (res.result[0] && res.result[0].folder_group.length) {
          // 如果是别的页面跳转进来
          if (querySerch) {
            const routerQuery = JSON.parse(route.query.querydata)
            console.log(routerQuery,'路由参数', res.result);
            
            const find = res.result.find(ele => ele.id == routerQuery?.merchant_library_id) 
            console.log(find, '找到的想');

            if (find) {
              selectedKeys.value = [find.folder_group[0].id]
              groupItem.value = { ...find.folder_group[0] };
              groupItem.value.id = groupItem.value?.id.split("-")[0];
              expandedKeys.value = [find.id];
            } else {
              selectedKeys.value = [res.result[0].folder_group[0].id];
              groupItem.value = { ...res.result[0].folder_group[0] };
              groupItem.value.id = groupItem.value?.id.split("-")[0];
              // 是否 默认一个 或者 不是默认 且 数组长度为1的 (如果单独返回一个的时候)
        if (init || (!init && res.result.length == 1)) {
          expandedKeys.value = [res.result[0].id];
        } 
            }
            console.log(selectedKeys.value,  groupItem.value, groupItem.value.id);
            
          } else {

            console.log('进来1111111111');
            // 是否 默认一个 或者 不是默认 且 数组长度为1的 (如果单独返回一个的时候)
        if (init || (!init && res.result.length == 1)) {
          expandedKeys.value = [res.result[0].id];
        }        
            if (init) {
              // debugger
              //是否重新选中默认第一个
              selectedKeys.value = [res.result[0].folder_group[0].id];
              groupItem.value = { ...res.result[0].folder_group[0] };
              groupItem.value.id = groupItem.value?.id.split("-")[0];
              // groupItem.value.id = JSON.parse(JSON.stringify(groupItem.value?.id.split("-")[0]))
            } else {
              if (groupItem.value?.id) {
                if (!groupEditData.value.id) {
                  treeData.value.forEach((item) => {
                    if (item.id == groupItem.value?.merchant_library_id) {
                      selectedKeys.value = [item.folder_group[0].id];
                    }
                  });
                }
              } else {
                groupItem.value = res.result[0]?.folder_group[0];
                selectedKeys.value = [res.result[0]?.folder_group[0].id];
              }
            }
          }
        }

        tagObj.value.projectName = treeData.value[0].name;
        tagObj.value.libraryName = treeData.value[0].folder_group[0]?.name;
        nextTick(() => {
          getFolderList({querySerch});
        });
      } else {
        treeData.value = [];
        folderList.vlaue = [];
      }
      treeSpinLoading.value = false;
    })
    .catch(() => {
      treeSpinLoading.value = false;
    });

  // if (Object.keys(route.query).length > 0 && route.query.activeKey) {
  //   activeKeyChange(route.query.activeKey)
  // }
};

const fileTxtChange = ref("");
const checkAll = ref(false);
const indeterminate = ref(false);
const subFileList = ref([]);
const checkedNum = ref(0);
// 树形结构  点击父级  子级收缩
const selectChange = (key, e) => {
  fileTxtChange.value = "";
  checkAll.value = false;
  indeterminate.value = false;
  subFileList.value = [];
  checkedNum.value = 0;
  let groupData = {};

  // 代表是父级
  if (!e.node?.parent) {
    tagObj.value.projectName = e?.node?.name;
    tagObj.value.libraryName = e?.node?.folder_group[0].name;
    const findIndex = expandedKeys.value.findIndex(
      (item) => item == e.node.key
    );
    selectedKeys.value = [e.node.folder_group[0].id];
    findIndex == -1
      ? (() => {
          expandedKeys.value.push(e.node.key);
        })()
      : (() => {
          expandedKeys.value.splice(findIndex, 1);
        })();
  } else {
    selectedKeys.value = [e.node.key];
    tagObj.value.projectName = e?.node?.parent?.node?.name;
    tagObj.value.libraryName = e?.node?.name;
  }
  groupData.value = {};
  treeData.value.forEach((item) => {
    item.folder_group.forEach((group) => {
      if (group.id == selectedKeys.value[0]) {
        groupData = {
          ...group,
        };
      }
    });
  });
  groupData.id = groupData.id.split("-")[0];
  groupItem.value = groupData;
  getFolderList();
};

const pageInfo = ref({
  current: 1,
  pageSize: 40,
  total: 0,
});
const isActiveKey = ref(false);
const isDelete = ref(false);
const fileSpinning = ref(false);
const isCanDelete = ref(true);
// 获取文件夹      *****************
const getFolderList = (param={}) => {
  const {querySerch = false} = param
  let params = {
    page: pageInfo.value.current,
    pageSize: pageInfo.value.pageSize,
    merchant_library_id: groupItem.value.merchant_library_id,
    group_id: selectedKeys.value[0],
    folder_use_type: 1,
  };

  if (typeof selectedKeys.value[0] === "string") {
    params.group_id = selectedKeys.value[0].split("-")[0];
  }
  if (isActiveKey.value) {
    params.merchant_library_id = 0;
    params.group_id = undefined;
  }

  if (isDelete.value) {
    if (treeData.value.length) {
      params.merchant_library_id = treeData.value[0].id;
      params.group_id = Number(
        treeData.value[0].folder_group[0].id.split("-")[0]
      );
    } else {
      params.merchant_library_id = 0;
      params.group_id = undefined;
    }
  }

  fileSpinning.value = true;
  request
    .post("/work_ai", "/user/shotstack/folder/list", params)
    .then((res) => {
      pageInfo.value.total = res.result.total;
      res.result.data = res.result.data.map((item) => ({
        ...item,
        isInput: false,
        checkedValue: false,
      }));

      let listNum = res.result.data.map((item) => item.is_can_delete);
      if (listNum.includes(0)) {
        isCanDelete.value = true;
      } else {
        isCanDelete.value = false;
      }
      folderList.value = res.result.data;
      fileSpinning.value = false;
      console.log(folderList.value,'文件夹详情');

      // 如果是从外部进来. 直接要进入某个文件夹
      if (querySerch) {
        const routerQuery = JSON.parse(route.query.querydata)
        const find = folderList.value.find(ele => ele.id == routerQuery?.id)
        find && fileDetail(find)
      }

    })
    .finally(() => {
      fileSpinning.value = false;
      isDelete.value = false;
    });
};

// 子级多媒体(图片、视频、音频)文件夹
const getMediaList = (tagTxt) => {
  fileSpinning.value = true;
  if (tagTxt == "tagSubmit") {
    indeterminate.value = false;
  }
  request
    .post("/work_ai", "/user/shotstack/media/list", {
      merchant_folder_statck_id: fileData.value.id,
      page: pageInfo.value.current,
      pageSize: pageInfo.value.pageSize,
    })
    .then((res) => {
      subFileList.value = [];
      res.result.data.forEach((item) => {
        item.name = item.material_name;

        if (!tagTxt && isSpinning.value) {
          item.spinning = true;
        } else {
          item.spinning = false;
        }
      });
      nextTick(() => {
        subFileList.value = res.result.data;
        fileSpinning.value = false;
      });
      pageInfo.value.total = res.result.total;
    })
    .finally(() => {
      fileSpinning.value = false;
    });
};

// 子级文案文件夹
const getTextList = () => {
  fileSpinning.value = true;
  request
    .get("/work_ai", "/user/shotstack/text/list", {
      page: pageInfo.value.current,
      pageSize: pageInfo.value.pageSize,
      merchant_folder_statck_id: fileData.value.id,
    })
    .then((res) => {
      res.result.data.forEach((item) => {
        item.name = item.material_content;
      });
      subFileList.value = res.result.data;
      pageInfo.value.total = res.result.total;
      fileSpinning.value = false;
    })
    .finally(() => {
      fileSpinning.value = false;
    });
};

// tab栏初始值
const activeKey = ref("1");
// tab栏切换
const activeKeyChange = (key) => {
  folderList.value = [];
  showProjectTagList.value = false;
  if (key == "1") {
    tagObj.value.typeName = "项目素材";
    tagObj.value.folderName = "";
    tagObj.value.projectName = treeData.value[0]?.name;
    tagObj.value.libraryName = treeData.value[0]?.folder_group[0]?.name;
    getlibraryList({init:true});
    isActiveKey.value = false;
    fileTxtChange.value = "";
    checkAll.value = false;
    indeterminate.value = false;
    subFileList.value = [];
    checkedNum.value = 0;
  } else {
    generalMaterialsClick();
  }
};

const generalMaterialsClick = () => {
  checkedNum.value = 0;
  fileTxtChange.value = "";
  checkAll.value = false;
  isActiveKey.value = true;
  indeterminate.value = false;
  activeKey.value = "2";
  selectedKeys.value = [];
  expandedKeys.value = [];
  subFileList.value = [];
  groupItem.value.merchant_library_id = 0;
  groupItem.value.id = 0;
  tagObj.value.typeName = "通用素材";
  tagObj.value.projectName = "";
  tagObj.value.libraryName = "";
  tagObj.value.folderName = "";
  getFolderList();
};

// /新建项目相关
const merchantId = ref(0);
const visibleMerchant = ref(false);
// 新建项目实例
const merchantRef = ref(null);
// 添加项目
const addBusiness = () => {
  if (store.getters.isVersionExpired) {
    notification.warn({ message: "您的套餐已到期", duration: 2 });
    vipVisible.value = true

  } else {
    merchantId.value = 0;
    merchantRef.value && merchantRef.value.showModal();
    visibleMerchant.value = true;
  }
};
//关闭添加项目 弹窗
const onCancelMerchant = () => {
  visibleMerchant.value = false;
};

//添加项目成功的回调
const onSubmitMerchant = () => {
  visibleMerchant.value = false;
  getlibraryList({init:false});
};

// 搜索框的值
const seatchValue = ref("");

// 所搜触发的 事件
const searchChane = () => {
  getlibraryList({init:true});
};

// 清理内存 弹窗
const visibleCleaning = ref(false);
// 清理内存
const clearClick = () => {
  visibleCleaning.value = true;
};
// 关闭内存弹窗
const onSubmitClean = () => {
  visibleCleaning.value = false;
  getCapacity();
};

// 扩容
const addMater = () => {
  kuarongRef.value.showModal();
  // router.push({
  //   name: "VoucherCenter",
  //   query: {
  //     key: 1,
  //   },
  // });
};

// 去下载中心
const goDowloadCenter = () => {
  router.push({
    name: "Download",
  });
};
// 剩余空间相关
const capacityFormat = ref("");
const capacityToTalFormat = ref("");
const percent = ref(0);

// 获取剩余空间
const getCapacity = () => {
  request.get("/work_ai", "/user/shotstack/media/capacity").then((res) => {
    console.log(res,'空间剩余');
    
    capacityFormat.value = res.capacityFormat;
    capacityToTalFormat.value = res.capacityToTalFormat;
    // 大于等于1 才进行计算
    if (res.capacityToTalBytes >= 1) {
      percent.value = +(
        (Number(res.capacityBytes) / Number(res.capacityToTalBytes)) *
        100
      ).toFixed(1);
      return
    } 
    percent.value = 100
  });
};

const simpleImage = ref(Empty.PRESENTED_IMAGE_SIMPLE);

onMounted(() => {
  getCapacity();

  getlibraryList({init: true, querySerch:false});

  nextTick(() => {
    if (Object.keys(route.query).length > 0 && route.query.activeKey) {
      activeKeyChange(route.query.activeKey);
    }
    if (route.query && route.query.titleKey) {
      activeTitleKey.value = route.query.titleKey;
    }
  });
});
const treeHeight = ref(window.innerHeight * 0.7); 
window.addEventListener("resize", () => {
  treeHeight.value = window.innerHeight * 0.7;
});


// 储存空间不足, 充值
const topUp = () => {
  kuarongRef.value.showModal();
  // NewUploadvisable.value = false
}

// 充值空间不足, 打开vip弹窗
const openVipModel = () => {
  vipVisible.value = true
  vipModalRef.value && vipModalRef.value.openBuyVisible()
}
</script>

<style lang="less" scoped>
.box {
  padding: 14px 14px 0;
  height: 100%;

  // 头部
  .title_box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .memory {
      margin-right: 10px;

      .qingli {
        margin-right: 5px;
      }
    }
  }

  // 内容
  .content {
    width: 100%;
    height: 95%;
    margin-top: 20px;

    .content-box {
      width: 100%;
      height: 100%;
      border-radius: 5px;

      .left-content {
        height: 100%;
        border-right: 1px solid var(--w-e-textarea-slight-border-color);
        padding: 0 10px;
        padding-left: 0px;
        position: relative;
        display: flex;

        .left-content-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .left-content-box-icon {
            padding-left: 2px;
            margin: 0;
            margin-bottom: 4px;
          }

          .left-content-box-title {
            writing-mode: vertical-rl;
            text-orientation: upright;
            line-height: 1;
            text-align: center;
            letter-spacing: 5px;
            padding-top: 2px;
          }
        }

        :deep(.ss-tabs-tab) {
          padding: 8px;
        }

        :deep(.ss-collapse > .ss-collapse-item) {
          border-bottom: none;
        }

        :deep(.ss-collapse > .ss-collapse-item > .ss-collapse-header) {
          padding: 10px;
        }

        :deep(.ss-collapse-content-box) {
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;
          background: #f5f6f8;
          padding-bottom: 5px;
        }

        :deep(.ss-tree .ss-tree-node-content-wrapper .ss-tree-iconEle) {
          display: none;
        }

        :deep(.ss-tree.ss-tree-directory .ss-tree-treenode-selected::before) {
          background: var(--ss-primary-3);
        }
      }

      .right-content {
        padding-left: 10px;
        height: 100%;
        overflow: hidden;
        padding-bottom: 40px;
        border-left: 1px solid #dbdbdb6b;


        .addFile {
          border: none;
          border-radius: 5px;
          margin-right: 10px;

          .addFile_icon {
            font-size: 18px;
          }
        }

        .goBack {
          background: #f1edeb;
          border: none;
          border-radius: 5px;
          color: #333639;
          margin: 4px 0;
        }

        .file-batch-operate-box {
          display: flex;
          justify-content: flex-start;
          margin-bottom: 15px;

          .item {
            padding: 0px;
            width: 100px;
            height: 25px;
            text-align: center;
            line-height: 34px;
            cursor: pointer;

            .icon {
              margin-right: 5px;
            }
          }
        }

        .content {
          width: 100%;
          height: 75%;
          overflow: hidden auto;
          padding-bottom: 150px;
        }
      }
    }
  }
}

.mobile-img {
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 280px;
  }
}

.mobile-title {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.ss-tree .ss-tree-treenode){
  margin: 2px 0;
}
</style>
